<template>
    <VueDragResize :isActiyve="false" :w="240" :h="0" v-on:resizing="resize" v-on:dragging="resize" :isResizable="false"
        :parentLimitation="false" :parentW="w" :parentH="h" :x="y" :y="150">

        <div class="settingDailog el-fade-in" :class="dailogShow ? 'active' : ''">
            <div class="settingDailog_title">
                <div class="settingDailog_title_content">
                    图像调节
                </div>
                <div class="settingDailog_title_icon el-icon-close" @click="closedSetting">

                </div>
            </div>
            <div class="settingDailog_containers" @mousedown="mouseStop">
                <div class="settingDailog_content">
                    <div class="settingDailog_content_div">
                        <div class="settingDailog_content_div_title">
                            <div class="name">
                                伽马
                            </div>
                            <div class="name_value">
                                {{ coordinateColor.gama }}
                            </div>
                        </div>
                        <div class="settingDailog_content_div_slide">
                            <el-slider v-model="coordinateColor.gama" @change="onGamaSlideInput"></el-slider>
                        </div>
                    </div>
                    <div class="settingDailog_content_div">
                        <div class="settingDailog_content_div_title">
                            <div class="name">
                                对比度
                            </div>
                            <div class="name_value">
                                {{ coordinateColor.contrast }}%
                            </div>
                        </div>
                        <div class="settingDailog_content_div_slide">
                            <el-slider v-model="coordinateColor.contrast" @change="onContrastSlideChange"></el-slider>
                        </div>
                    </div>
                    <div class="settingDailog_content_div">
                        <div class="settingDailog_content_div_title">
                            <div class="name">
                                亮度
                            </div>
                            <div class="name_value">
                                {{ coordinateColor.light }}%
                            </div>
                        </div>
                        <div class="settingDailog_content_div_slide">
                            <el-slider v-model="coordinateColor.light" @change="onLightSlideInput"></el-slider>
                        </div>
                    </div>
                </div>
                <div class="settingDailog_content_header">
                    颜色通道
                </div>
                <div class="settingDailog_content">
                    <div class="settingDailog_content_div">
                        <div class="settingDailog_content_div_title">
                            <div class="name">
                                红：
                            </div>
                            <div class="name_value" style="background:red">
                                {{ coordinateColor.red }}%
                            </div>
                        </div>
                        <div class="settingDailog_content_div_slide red">
                            <el-slider v-model="coordinateColor.red" @change="onRedSlideInput" :max="100"></el-slider>
                        </div>
                    </div>
                    <div class="settingDailog_content_div">
                        <div class="settingDailog_content_div_title">
                            <div class="name">
                                绿：
                            </div>
                            <div class="name_value" style="background:green">
                                {{ coordinateColor.green }}%
                            </div>
                        </div>
                        <div class="settingDailog_content_div_slide green">
                            <el-slider v-model="coordinateColor.green" @change="onGreenSlideInput" :max="100"></el-slider>
                        </div>
                    </div>
                    <div class="settingDailog_content_div">
                        <div class="settingDailog_content_div_title">
                            <div class="name">
                                蓝：
                            </div>
                            <div class="name_value" style="background:blue">
                                {{ coordinateColor.blue }}%
                            </div>
                        </div>
                        <div class="settingDailog_content_div_slide blue">
                            <el-slider v-model="coordinateColor.blue" @change="onBlueSlideInput" :max="200"></el-slider>
                        </div>
                    </div>
                </div>
            </div>

        </div>


    </VueDragResize>
</template>

<script>
const { body } = document
import VueDragResize from 'vue-drag-resize'
export default {
    name: 'visionControl',
    props: {},
    components: {
        VueDragResize
    },

    data() {
        return {
            coordinateColor: {
                red: 50,
                blue: 0,
                green: 0,
                gama: 100,
                contrast: 100,
                light: 50,
            },
            dailogShow: false,
            width: 0,
            height: 0,
            top: 0,
            w: document.documentElement.clientWidth,
            h: document.documentElement.clientHeight - 50,
            left: 0,
            y: 0
        }
    },
    computed: {

    },
    created() {

    },
    beforeMount() {
        window.addEventListener('resize', this.$_resizeHandlery)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.$_resizeHandlery)
    },
    mounted() {

    },
    methods: {

        //对比度调节事件
        onContrastSlideChange(e) {
            this.coordinateColor.gama = 100;
            this.coordinateColor.light = 50;
            let data = {
                e: e,
                type: 'contrast'
            }
            this.$emit('changeSlider', data)

        },
        //亮度调节事件
        onLightSlideInput(e) {
            this.coordinateColor.contrast = 100;
            this.coordinateColor.gama = 100;
            let data = {
                e: e,
                type: 'light'
            }
            this.$emit('changeSlider', data)

        },
        //gama调节事件
        onGamaSlideInput(e) {
            this.coordinateColor.contrast = 100;
            this.coordinateColor.light = 50;
            let data = {
                e: e,
                type: 'gama'
            }
            this.$emit('changeSlider', data)

        },
        //red调节事件
        onRedSlideInput(e) {
            let data = {
                value: {
                    red: e,
                    green: this.coordinateColor.green,
                    blue: this.coordinateColor.blue
                },
                type: 'red'
            }
            this.$emit('changeSlider', data)
        },
        //green调节事件
        onGreenSlideInput(e) {
            let data = {
                value: {
                    red: this.coordinateColor.red,
                    green: e,
                    blue: this.coordinateColor.blue
                },
                type: 'green'
            }
            this.$emit('changeSlider', data)
        },
        //blue调节事件
        onBlueSlideInput(e) {
            let data = {
                value: {
                    red: this.coordinateColor.red,
                    green: this.coordinateColor.green,
                    blue: e
                },
                type: 'blue'
            }
            this.$emit('changeSlider', data)
        },
        mouseStop(e) {
            e.stopPropagation();//阻止冒泡
        },
        $_resizeHandlery() {
            this.y = body.getBoundingClientRect().width - 350
        },
        resize(newRect) {
            this.width = newRect.width
            this.height = newRect.height
            this.top = newRect.top
            this.left = newRect.left
        },
        open() {
            this.y = body.getBoundingClientRect().width - 350
            this.dailogShow = true
        },
        closed() {
            this.dailogShow = false
        },
        closedSetting() {
            this.$emit("closed", 'visionControl')
        },



    }
}
</script>

<style lang="scss" scoped>
.vdr.active:before {
    outline: none !important;
}

.settingDailog {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    width: 240px;
    z-index: -1;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    background-color: rgba(40, 49, 66, .7);
    border-radius: 10px;
    opacity: 0;
    height: 0px;
    padding: 10px;
    position: relative;
    box-sizing: border-box;
    cursor: move;

    .settingDailog_title {
        display: flex;
        color: #fff;
        line-height: 40px;
        align-items: center;
        justify-content: space-between;
        position: relative;

        .settingDailog_title_content {
            font-weight: 400;
        }

        .settingDailog_title_icon {
            cursor: pointer;
        }
    }
}

.settingDailog.active {
    opacity: 1;
    height: 410px;
    z-index: 1;
}

.settingDailog_content_header {
    margin-top: 20px;
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
}

.settingDailog_containers {
    background: #000;
    border-radius: 10px;
    padding: 10px 15px;
    cursor: default;

    .settingDailog_content_div_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        color: #fff;

        .name_value {
            width: 40px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 4px;
            background: rgba(40, 49, 66, .8);
        }
    }
}

::v-deep .settingDailog_content_div_slide .el-slider__runway {
    margin: 10px 0px;
}

::v-deep .settingDailog_content_div_slide.red .el-slider__bar {
    background-color: red;
}

::v-deep .settingDailog_content_div_slide.green .el-slider__bar {
    background-color: green;
}

::v-deep .settingDailog_content_div_slide.blue .el-slider__bar {
    background-color: blue;
}

::v-deep .settingDailog_content_div_slide.red .el-slider__button {
    border-color: red;
}

::v-deep .settingDailog_content_div_slide.green .el-slider__button {
    border-color: green;
}

::v-deep .settingDailog_content_div_slide.blue .el-slider__button {
    border-color: blue;
}
</style>

